<template>
  <div class="form-control w-full" :class="{'dark-mode': isDarkMode}">
    <label v-if="label" class="label">
      <span class="label-text">
        {{ label }}
        <span v-if="required" class="text-error ml-1">*</span>
      </span>
    </label>
    <input
      :type="type"
      :value="modelValue"
      @input="handleInput"
      class="input input-bordered w-full"
      :class="{
        'input-error': error || (required && showRequiredError),
        'input-disabled': disabled
      }"
      :placeholder="placeholder"
      :disabled="disabled"
      @blur="handleBlur"
    />
    <label v-if="error || (required && showRequiredError)" class="label">
      <span class="label-text-alt text-error">{{ error || '此项为必填项' }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Props {
  modelValue: string;
  label?: string;
  placeholder?: string;
  error?: string;
  disabled?: boolean;
  type?: 'text' | 'password' | 'email' | 'tel';
  required?: boolean;
  isDarkMode?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '',
  type: 'text',
  disabled: false,
  required: false,
  isDarkMode: true,
});
const isDarkMode = ref(true);
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const showRequiredError = ref(false);

const handleInput = (event: Event) => {
  const target = event.target as HTMLInputElement;
  emit('update:modelValue', target.value);
  // 如果用户输入了内容，隐藏必填错误提示
  if (target.value.trim() !== '') {
    showRequiredError.value = false;
  }
  return target.value;
};
const TextInput = ref<any>();
const handleBlur = (event: Event) => {
  const target = event.target as HTMLInputElement;
  TextInput.value = target.value;
  // 当失去焦点且为必填项但未填写内容时，显示必填错误提示
  if (props.required && target.value.trim() === '') {
    showRequiredError.value = true;
  } else {
    showRequiredError.value = false;
  }
};
// 暴露方法给父组件
defineExpose({
  TextInput,
})
watch(() => props.isDarkMode, (newValue) => {
  isDarkMode.value = newValue;
}, { immediate: true, deep: true });
</script>
<style scoped>
/* 深色模式适配 */
.dark-mode {
  background: transparent !important;
}

.dark-mode .input {
    background-color: var(--se-main-bg-color) !important;
    color: var(--text-color) !important;
    border-color: rgb(170,170,170) !important;
    border-width: 1px;
    box-shadow: var(--preview-text-color) !important;
}

.dark-mode .input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

.dark-mode .input:hover {
  border-color: #4b5563 !important;
}

.dark-mode .input:disabled {
  background-color: #374151 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

.dark-mode .input::placeholder {
  color: #6b7280 !important;
}

.dark-mode .label-text {
  color: #e5e7eb !important;
}

.dark-mode .label-text-alt {
  color: var(--error-color) !important;
}

@media (max-width: 1024px) {
  .input {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 28px !important;
  }

  .label-text {
    font-size: 12px !important;
  }

  .dark-mode .label-text {
    color: var(--text-color);
  }

  .label-text-alt {
    font-size: 11px !important;
  }

  .label {
    padding: 0.25rem 0 !important;
  }
}
</style>
